import React, { useState } from "react";
import {
    DesktopOutlined,
    FileOutlined,
    PieChartOutlined,
    TeamOutlined,
    UserOutlined,
} from "@ant-design/icons";
import { Breadcrumb, Layout, Menu, theme, Avatar, Button } from "antd";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { tworouter } from "./router/index";
import style from './app.module.css'
const { Header, Content, Footer, Sider } = Layout;

function Home() {

    const nav = useNavigate()
    const { pathname } = useLocation()
    // 递归渲染路由
    const erji = (arr) => {
        return arr.map((item) => {
            return {
                key: item.path,
                icon: '',
                children: item.children ? erji(item.children) : null,
                label: item.title,
            };
        });
    };
    const items = erji(tworouter);

    // 退出登录按钮
    const outlogin =()=>{
        window.location.href = '/login'
        // 清楚本地
        localStorage.clear()
    }

    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (
        <div>
            <Layout style={{ minHeight: "100vh" }}>
                <Sider
                    collapsible
                    collapsed={collapsed}
                    onCollapse={(value) => setCollapsed(value)}
                >
                    <div className="demo-logo-vertical" />
                    <Menu
                        theme="dark"
                        defaultSelectedKeys={[pathname]}
                        mode="inline"
                        items={items}
                        onClick={({ key }) => nav(key)}
                    />
                </Sider>
                <Layout>
                    <Header style={{ padding: 0, background: colorBgContainer }} >
                        <div className={style.topbox}>
                            <div>
                                <Avatar size={60} src='https://img1.baidu.com/it/u=215314937,32921397&fm=253&app=138&f=JPEG?w=500&h=500' />
                                <span>{localStorage.getItem('username')}</span>
                            </div>
                            <Button type="primary" onClick={outlogin}>退出登录</Button>
                        </div>
                    </Header>
                    <Content style={{ margin: "0 16px" }}>
                        <Breadcrumb
                            style={{ margin: "16px 0" }}
                            items={[{ title: "User" }, { title: "Bill" }]}
                        />
                        <div
                            style={{
                                padding: 24,
                                minHeight: 360,
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                            }}
                        >
                            <Outlet></Outlet>
                        </div>
                    </Content>
                    <Footer style={{ textAlign: "center" }}>
                        Ant Design ©{new Date().getFullYear()} Created by Ant UED
                    </Footer>
                </Layout>
            </Layout>
            123
        </div>
    );
}

export default Home;
